<template>
    <el-scrollbar :class="{ 'is-collapse': collapse,['column-bar-container-' + theme.columnStyle]: true,}"
                  class="column-bar-container">
        <vab-logo/>
        <el-tabs
            v-model="extra.first"
            tab-position="left"
            @tab-click="handleTabClick">
            <el-tab-pane v-for="item in handleRoutes" :key="item.name" :name="item.name">
                <template slot="label">
                    <div :class="{ ['column-grid-' + theme.columnStyle]: true,}"
                         :title="translate(item.meta.title)"
                         class="column-grid">
                        <div style="line-height: 1.2;text-align: center">
                            <el-image v-if="item.meta.iconDefault" class="menu-icon-column default"
                                      :src="baseURL+'/sys/menuImage/getMenuImage?iconKey='+item.meta.iconDefault"><i
                                slot="error"/></el-image>
                            <el-image v-if="item.meta.iconActive" class="menu-icon-column active"
                                      :src="baseURL+'/sys/menuImage/getMenuImage?iconKey='+item.meta.iconActive"><i
                                slot="error"/></el-image>
                            <el-image v-if="item.meta.iconDefault&&!item.meta.iconActive" class="menu-icon-left active"
                                      :src="baseURL+'/sys/menuImage/getMenuImage?iconKey='+item.meta.iconDefault"><i
                                slot="error"/></el-image>
                            <vab-icon class="menu-icon-column"
                                      v-if="item.meta.iconFont"
                                      :icon="item.meta.iconFont"
                                      :is-custom-svg="item.meta.isCustomSvg"/>
                            <div>
                                {{ translate(item.meta.title) }}
                            </div>
                        </div>
                    </div>
                </template>
            </el-tab-pane>
        </el-tabs>

        <el-menu
            :background-color="variables['column-second-menu-background']"
            :default-active="activeMenu"
            :default-openeds="defaultOpeneds"
            :unique-opened="uniqueOpened"
            mode="vertical">
            <el-divider>
                {{ translateTitle(handleGroupTitle) }}
            </el-divider>
            <template v-for="route in handlePartialRoutes">
                <vab-menu v-if="!route.hidden" :key="route.path" :item="route"/>
            </template>
        </el-menu>
    </el-scrollbar>
</template>

<script lang="ts">
import BaseVue from "@/common/base-vue";
import variables from '@/vab/styles/variables/variables.scss'
import {baseURL, defaultOpeneds, openFirstMenu, uniqueOpened} from '@/config'
import {handleActivePath} from '@/utils/routes'
import {Component, Watch} from 'vue-property-decorator';
import {RouterGetterEnum, SettingsGetterEnum} from '@/store/enum/store.enum'

@Component({components: {}})
export default class ColumnBar extends BaseVue {
    private activeMenu:string = '';
    private groupTitle:string = '';
    private defaultOpeneds = defaultOpeneds;
    private uniqueOpened = uniqueOpened;
    private variables = variables;
    private baseURL = baseURL;

    get settings() {
        return {
            collapse: this.$store.getters[SettingsGetterEnum.collapse],
            theme: this.$store.getters[SettingsGetterEnum.theme],
            extra: this.$store.getters[SettingsGetterEnum.extra],
            routes: this.$store.getters[RouterGetterEnum.routes],
        }
    };

    get handleRoutes() {
        return this.settings.routes.filter((item) => item.hidden !== true && item.meta)
    };

    get handlePartialRoutes() {
        const activeMenu = this.settings.routes.find((v) => v.name === this.settings.extra.first)
        return activeMenu ? activeMenu.children : []
    };

    get handleGroupTitle() {
        const activeMenu = this.settings.routes.find((v) => v.name === this.settings.extra.first)
        return activeMenu ? activeMenu.meta.title : ''
    };

    @Watch('$route', {immediate: true})
    handler(route) {
        this.activeMenu = handleActivePath(route)
        const firstMenu = route.matched[0].name
        if (this.settings.extra.first !== firstMenu) {
            this.settings.extra.first = firstMenu
            this.handleTabClick(true)
        }
    };

    private handleTabClick(handler) {
        if (handler !== true && openFirstMenu) {
            this.$router.push(this.handlePartialRoutes[0].path)
            this.$store.dispatch('settings/openSideBar')
        }
    };

}
</script>

<style lang="scss" scoped>
@mixin active {
    &:hover {
        color: $base-color-blue;
        background-color: $base-column-second-menu-background-active !important;

        i,
        svg {
            color: $base-color-blue;
        }
    }

    &.is-active {
        color: $base-color-blue;
        background-color: $base-column-second-menu-background-active !important;
    }
}

.column-bar-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: $base-left-menu-width;
    height: 100vh;
    overflow: hidden;
    background: $base-column-second-menu-background;
    box-shadow: $base-box-shadow;

    ::v-deep {
        * {
            transition: $base-transition;
        }
    }

    &-vertical,
    &-card {
        ::v-deep {
            .el-tabs + .el-menu {
                left: $base-left-menu-width-min;
                width: $base-left-menu-width - $base-left-menu-width-min;
                border: 0;
            }
        }
    }

    &-horizontal {
        ::v-deep {
            .logo-container-column {
                .logo {
                    width: $base-left-menu-width-min * 1.3 !important;
                }

                .title {
                    margin-left: $base-left-menu-width-min * 1.3 !important;
                }
            }

            .el-tabs + .el-menu {
                left: $base-left-menu-width-min * 1.3;
                width: $base-left-menu-width - $base-left-menu-width-min * 1.3;
                border: 0;
            }
        }
    }

    &-card {
        ::v-deep {
            .el-tabs {
                .el-tabs__item {
                    padding: 5px !important;

                    .column-grid {
                        width: $base-left-menu-width-min - 10 !important;
                        height: $base-left-menu-width-min - 10 !important;
                        border-radius: 5px;
                    }

                    &.is-active {
                        background: transparent !important;

                        .column-grid {
                            background: $base-color-blue;
                        }
                    }
                }
            }

            .el-tabs + .el-menu {
                left: $base-left-menu-width-min + 10;
                width: $base-left-menu-width - $base-left-menu-width-min - 20;
            }

            .el-submenu .el-submenu__title,
            .el-menu-item {
                min-width: 180px;
                border-radius: 5px;
            }
        }
    }

    .column-grid {
        display: flex;
        align-items: center;
        width: $base-left-menu-width-min;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;

        &-vertical,
        &-card {
            justify-content: center;
            height: $base-left-menu-width-min;

            > div {
                svg {
                    position: relative;
                    top: 8px;
                    display: block;
                    width: $base-font-size-default + 4;
                    height: $base-font-size-default + 4;
                }

                [class*='ri-'] {
                    display: block;
                    height: 20px;
                }
            }
        }

        &-horizontal {
            justify-content: left;
            width: $base-left-menu-width-min * 1.3;
            height: $base-left-menu-width-min / 1.3;
            padding-left: $base-padding / 2;
        }
    }

    ::v-deep {
        .el-scrollbar__wrap {
            overflow-x: hidden;
        }

        .el-tabs {
            position: fixed;

            .el-tabs__header.is-left {
                margin-right: 0 !important;

                .el-tabs__nav-wrap.is-left {
                    margin-right: 0 !important;
                    background: $base-column-first-menu-background;

                    .el-tabs__nav-scroll {
                        height: 100%;
                        overflow-y: auto;

                        &::-webkit-scrollbar {
                            width: 0px;
                            height: 0px;
                        }
                    }
                }
            }

            .el-tabs__nav {
                height: calc(100vh - #{$base-logo-height});
                background: $base-column-first-menu-background;
            }

            .el-tabs__item {
                height: auto;
                padding: 0;
                color: $base-color-white;

                &.is-active {
                    background: $base-color-blue;
                }
            }
        }

        .el-tabs__active-bar.is-left,
        .el-tabs--left .el-tabs__nav-wrap.is-left::after {
            display: none;
        }

        .el-menu {
            border: 0;

            .el-divider {
                margin: 0 0 $base-margin 0;
                background-color: #f6f6f6;

                &__text {
                    color: $base-color-black;
                }
            }

            .el-menu-item,
            .el-submenu__title {
                height: $base-menu-item-height;
                overflow: hidden;
                line-height: $base-menu-item-height;
                text-overflow: ellipsis;
                white-space: nowrap;
                vertical-align: middle;

                @include active;
            }
        }
    }

    &.is-collapse {
        ::v-deep {
            width: 0;
        }
    }
}
</style>
